<template>
  <div class="hotel-aspect-list">
    <div
      class="hotel-aspect-item"
      v-for="(aspect, index) in categories"
      :key="aspect.id || index"
      :class="{ 'last-item': index === categories.length - 1 }"
    >
      <div class="aspect-info">
        <div class="aspect-icon">
          <img
            :src="getAspectIcon(aspect.name)"
            :alt="aspect.name"
            class="icon-image"
          />
        </div>
        <div class="aspect-title">{{ aspect.name }}</div>
      </div>
      <div class="aspect-ratings">
        <div
          class="aspect-weight"
          :class="{ 'weight-bold': parseFloat(aspect.weight) >= 30 }"
        >
          {{ aspect.weight }}
        </div>
        <div class="aspect-value" :class="getScoreColorClass(aspect.score)">
          {{ aspect.score || "N/A" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotelAspectScores",
  props: {
    scores: {
      type: Array,
      default: () => [],
    },
    categories: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    formatPercentage(value) {
      return `${Math.round(value * 100)}%`;
    },
    getAspectIcon(name) {
      const iconMap = {
        "Location & Neighbourhood": require("@/assets/reply/biglocation1.png"),
        Cleanliness: require("@/assets/reply/bigclean1.png"),
        "Room Comfort": require("@/assets/reply/bigbed1.png"),
        "Food & Beverage": require("@/assets/reply/bigfood1.png"),
        "Hotel Amenities & Atmosphere": require("@/assets/reply/bigsun1.png"),
        "Guest Experience & Service": require("@/assets/reply/bigservices1.png"),
        "Value for Money": require("@/assets/reply/bigmoney1.png"),
      };
      return iconMap[name] || require("@/assets/reply/bigservices1.png");
    },
    // getScoreColorClass(score) {
    //   if (score == 0) {
    //     return "score-na";
    //   }
    //   if (score >= 9) return "score-deep-green";
    //   if (score >= 8) return "score-green";
    //   if (score >= 7) return "score-yellow";
    //   if (score >= 5) return "score-orange";
    //   if (score >= 3) return "score-red";
    //   if (score >= 1) return "score-deep-red";
    //   return "";
    // },
    getScoreColorClass(score) {
      if (score == 0) {
        return "score-na";
      }
      // 特殊处理需要加粗的分数
      const boldScores = [1, 2, 3, 9, 10];
      const isBold = boldScores.includes(Number(score));

      if (score >= 9) return "score-deep-green" + (isBold ? " score-bold" : "");
      if (score >= 8) return "score-green" + (isBold ? " score-bold" : "");
      if (score >= 7) return "score-yellow" + (isBold ? " score-bold" : "");
      if (score >= 5) return "score-orange" + (isBold ? " score-bold" : "");
      if (score >= 3) return "score-red" + (isBold ? " score-bold" : "");
      if (score >= 1) return "score-deep-red" + (isBold ? " score-bold" : "");
      return "";
    },
  },
};
</script>

<style scoped lang="scss">
.hotel-aspect-list {
  padding: 11px;
  box-sizing: border-box;
  border: 1px solid #cdcccc;
  border-radius: 10px;
}

.hotel-aspect-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;

  &.last-item {
    margin-bottom: 0;
  }
}

.aspect-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.aspect-icon {
  width: 0.1528rem;
  height: 0.1528rem;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
  }
}

.aspect-title {
  font-size: 0.0972rem;
  font-weight: 400;
  color: #6a6969;
}

.aspect-ratings {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 20px;
  width: 0.4861rem;
}

.aspect-weight {
  font-size: 0.0972rem;
  color: #5a86dd;
  font-weight: 500;
  margin-right: 8px;
  width: 60px;
  text-align: left;

  &.weight-bold {
    font-weight: 700; // Added bold style for weights > 30%
  }
}

.aspect-value {
  font-size: 0.0972rem;
  text-align: right;
  flex: 1;

  &.score-deep-green {
    color: #006400;
    font-weight: 700;
  }
  &.score-green {
    color: #2faa68;
  }
  &.score-yellow {
    color: #ffcc00;
  }
  &.score-orange {
    color: #f68d2b;
  }
  &.score-red {
    color: #e51837;
  }
  &.score-deep-red {
    color: #8b0000;
  }
  &.score-na {
    color: #6a6969;
    font-size: 0.0833rem;
    font-weight: 500;
  }
  &.score-bold {
    font-weight: 700 !important;
    text-align: right;
    font-size: .0833rem;
  }
}
</style>
